<template>
  <view class="virtual-list-item-wrapper">
    <view class="item-content">
      <view class="item-title">{{ item.title || `Item ${index + 1}` }}</view>
      <view class="item-desc">{{
        item.description || `Description for item ${index + 1}`
      }}</view>
      <view class="item-time">{{ formatTime(item.timestamp) }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "VirtualListItem",

  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    index: {
      type: Number,
      required: true,
    },
  },

  methods: {
    formatTime(timestamp) {
      if (!timestamp) return "";
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")}`;
    },
  },
};
</script>

<style lang="scss">
.virtual-list-item-wrapper {
  padding: 20rpx;
  border-bottom: 2rpx solid #ccc;
  background-color: #fff;
  transition: background-color 0.3s;

  &:active {
    background-color: #ccc;
  }

  .item-content {
    .item-title {
      font-size: var(--nut-font-size-3);
      color: $text-color;
      margin-bottom: 8rpx;
      font-weight: 500;
    }

    .item-desc {
      font-size: var(--nut-font-size-2);
      color: #000;
      margin-bottom: 8rpx;
    }

    .item-time {
      font-size: var(--nut-font-size-1);
      color: #000;
    }
  }
}

// 深色模式
[data-theme="dark"] {
  .virtual-list-item-wrapper {
    background-color: #000;
    border-bottom-color: #000;
    &:active {
      background-color: #fff;
    }

    .item-content {
      .item-title {
        color: #fff;
      }

      .item-desc {
        color: #000;
      }

      .item-time {
        color: #000;
      }
    }
  }
}
</style>
